<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
	<link rel="stylesheet" th:href="@{/moban/css/index.css}"/>
	<link rel="stylesheet" th:href="@{/moban/css/table.css}"/>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
	<script th:src="@{/moban/js/jquery-1.7.2.min.js}"></script>
	<script th:src="@{/moban/js/main.js}"></script>
	<script type="text/javascript" th:src="@{/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
	<title>车位详情</title>
	<style type="text/css">
		#allmap {height: 400px;width:100%;overflow: hidden;}
		#result {width:100%;font-size:12px;}
	</style>
</head>
<body >

<span th:replace="/common/head2 :: header"></span>

<div class="main">
	<div class="container clearfix">
		<div class="bread">当前位置：
			<a href="#">首页</a> >
			<a href="#">车位详情</a>
		</div>
		<div class="main-left fl clearfix" >
			<div class="zoom-wrap fl" style="width: 60%">
				<div id="allmap">	
				</div>
				<div id="result">
				</div>
			</div>
			<div class="attr fl" style="width:200px">
				<p>车位编号：<span th:text="${car.name}"></span></p>
				<p>每天/元：<span th:text="${car.price}"></span></p>
				<p>路线推介：进入停车场后直行5米，左转弯行驶<span th:text="${car.id*3}"></span>米</p>
				<a th:href="@{'/car/buy?id='+${car.id}}" class="pay">立即预约</a>
			</div>
			<div class="clearfix"></div>
		</div>

	</div>
</div>

<span th:replace="/common/foot :: footer"></span>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QUSzk8g7c6Z10cAmLmfjgG1NB7aaBiyo
"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
	
<script type="text/javascript">
	// 百度地图API功能
    var map = new BMap.Map('allmap');
    var poi = new BMap.Point(116.493237,40.005951);
    map.centerAndZoom(poi, 16);
    map.enableScrollWheelZoom();

    var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                    '' +
                    '地址：北京市朝阳区绿地中心<br/>电话：(010)0000000<br/>简介：停车场。' +
                  '</div>';

    //创建检索信息窗口对象
    var searchInfoWindow = null;
	searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
			title  : "易泊停车场",      //标题
			width  : 290,             //宽度
			height : 105,              //高度
			panel  : "panel",         //检索结果面板
			enableAutoPan : true,     //自动平移
			searchTypes   :[
				
				BMAPLIB_TAB_TO_HERE,  //到这里去
			]
		});
    var marker = new BMap.Marker(poi); //创建marker对象
    marker.enableDragging(); //marker可拖拽
    marker.addEventListener("click", function(e){
	    searchInfoWindow.open(marker);
    })
    map.addOverlay(marker); //在地图中添加marker
	//样式1
	var searchInfoWindow1 = new BMapLib.SearchInfoWindow(map, "信息框1内容", {
		title: "信息框1", //标题
		panel : "panel", //检索结果面板
		enableAutoPan : true, //自动平移
		searchTypes :[
			BMAPLIB_TAB_FROM_HERE, //从这里出发
			BMAPLIB_TAB_SEARCH   //周边检索
		]
	});
	function openInfoWindow1() {
		searchInfoWindow1.open(new BMap.Point(116.319852,40.057031));
	}
	//样式2
	var searchInfoWindow2 = new BMapLib.SearchInfoWindow(map, "信息框2内容", {
		title: "信息框2", //标题
		panel : "panel", //检索结果面板
		enableAutoPan : true, //自动平移
		searchTypes :[
			BMAPLIB_TAB_SEARCH   //周边检索
		]
	});
	function openInfoWindow2() {
		searchInfoWindow2.open(new BMap.Point(116.324852,40.057031));
	}
	//样式3
	var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, "信息框3内容", {
		title: "信息框3", //标题
		width: 290, //宽度
		height: 40, //高度
		panel : "panel", //检索结果面板
		enableAutoPan : true, //自动平移
		searchTypes :[
		]
	});
	function openInfoWindow3() {
		searchInfoWindow3.open(new BMap.Point(116.328852,40.057031)); 
	}
</script>
</body>
</html>